<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="70vw"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="name + nianji[data.grade_id - 1] + data.title + '--班级名单'"
    @update:visible="updateVisible"
  >
    <el-form
      :model="query"
      label-width="50px"
      class="ele-form-search"
      @keyup.enter.native="reload"
      @submit.native.prevent
    >
      <el-row :gutter="15">
        <el-col :lg="5" :md="12">
          <el-form-item label="性别:">
            <el-select
              style="width: 100%"
              clearable
              v-model="query.gender"
              placeholder="请选择性别"
            >
              <el-option value="99" label="全部" />
              <el-option value="0" label="女" />
              <el-option value="1" label="男" />
              <el-option value="0" label="保密" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="10" :md="12">
          <el-form-item label-width="0">
            <el-input
              clearable
              :maxlength="20"
              v-model="query.keyword"
              placeholder="输入姓名或学号、身份证号码、设备IME1、SIM卡号、电话等关键词"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="9" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="apiList"
              >查询
            </el-button>
            <el-button
              @click="
                query.page = 1;
                query.sex = '1';
                query.keyword = '';
                apiList();
              "
              >重置</el-button
            >
            <el-button @click="exportExcel">导出学生信息</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      border
      lazy
      ref="table"
      :data="list"
      v-loading="loading"
      height="calc(100vh - 315px)"
    >
      <el-table-column label="序号" width="55" align="center" type="index">
        <template slot-scope="scope">
          <span v-text="$setTableIndex(query.page, query.limit, scope.$index)">
          </span>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" prop="avatar">
        <template slot-scope="scope">
          <img
            v-lazy="$api + scope.row.avatar"
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="学号" align="center" prop="student_no" />
      <el-table-column label="身份证号" align="center" prop="id_card" />
      <el-table-column label="学校" align="center" prop="schoole_name" />
      <el-table-column label="年级" align="center" prop="grade_name">
      </el-table-column>
      <el-table-column label="班级" align="center" prop="class_name">
      </el-table-column>
      <el-table-column label="电话" align="center" prop="phone" />
      <el-table-column label="紧急联系人" align="center" prop="relatives_phone" />
      <el-table-column label="设备IMEI" align="center" prop="imei" />
      <el-table-column label="SIM卡号" align="center" prop="sim_no" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="create_time"
        width="160"
      >
        <template slot-scope="scope">{{
          scope.row.create_time
            ? $util.toDateString(scope.row.create_time)
            : "暂无"
        }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="80"
      >
      <!--  slot-scope="{ row }" -->
        <template>
          <el-link
            type="text"
            :underline="false"
            >轨迹
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="ele-pagination">
      <pagination
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="apiList"
          />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "bjmd",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    name: String,
    id: Number,
  },
  // components: { Treeselect},
  data() {
    return {
      nianji: [
        "一年级",
        "二年级",
        "三年级",
        "四年级",
        "五年级",
        "六年级",
        "七年级",
        "八年级",
        "九年级",
      ],
      query: {
        page: 1,
        limit: 20,
        gender: "99",
        keyword: "",
      },
      list: [],
      loading: true,
      total: 0,
    };
  },
  watch: {
    data() {
      this.query.page = 1;
      this.apiList();
    },
  },
  mounted() {},
  methods: {
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
    apiList() {
      this.$http
        .get("/student/index", {
          params: {
            ...this.query,
            grade_id: this.data.grade_id,
            class_id: this.data.class_key,
            schoole_id: this.id,
            gender: this.query.gender == "99" ? "" : this.query.gender,
          },
        })
        .then((res) => {
          this.loading = false;
          this.total = res.data.count;
          this.list = res.data.data;
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
     /* 导出数据Excel */
     exportExcel() {
      let info = JSON.parse(JSON.stringify(this.query));
      console.log(info)
      this.$http
        .get("/student/exportExcel",{ params: {...this.query,export_type:0}})
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        })
    },
  },
};
</script>

<style scoped>
</style>
